<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="160px">
      <el-row>
        <el-form-item label="任务编号" prop="taskNum">
          <el-input v-model="queryParams.taskNum" placeholder="请输入任务编号" clearable />
        </el-form-item>
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable />
        </el-form-item>
        <el-form-item label="任务状态" prop="taskStatus">
          <el-select v-model="queryParams.taskStatus" placeholder="请选择" clearable>
            <el-option v-for="(key, val) in optionCode['taskStatus']" :key="key" :label="key" :value="val"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="省" prop="province">
          <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable>
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="county">
          <el-select v-model="queryParams.county" placeholder="请选择区/县" clearable>
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label=" ">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-tabs v-model="activeTabName" type="card" @tab-click="handleClick">
      <el-tab-pane label="所有任务" name="all">
        <el-table :data="allDataList" v-loading="allLoading" style="width: 100%; margin-bottom: 20px" stripe
          row-key="id" border default-expand-all>
          <el-table-column prop="taskNum" label="任务编号" align="center" />
          <el-table-column prop="taskName" label="任务名称" align="center">
            <template #default="{row}">
              <el-link type="primary" :underline="false" @click="viewDetail(row)">{{row.taskName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="taskManager" label="任务管理员" align="center" />
          <el-table-column prop="taskStatus" label="任务状态" align="center">
            <template #default="{row}">
              <span>{{optionCode['taskStatus'][row.taskStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="groupName" label="承担小组" align="center" />
          <el-table-column prop="groupLeader" label="组长" align="center" />
          <el-table-column prop="taskDistrict" label="任务地区" align="center">
          	<template #default="scope">
              <el-tooltip
				        placement="top"						
				        v-model="scope.row.showTooltip"			
				        :show-after="500"		
				        :content="scope.row.taskDistrict"
				        effect="dark"				
				        :disabled="!scope.row.showTooltip">
				        <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.taskDistrict}}</div>
							</el-tooltip>
           </template>
          </el-table-column>
          <el-table-column prop="parentTask" label="所属父任务" align="center" />
        </el-table>
        <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
          v-model:limit="queryParams.rows" @pagination="getAllTaskList" />
      </el-tab-pane>
      <el-tab-pane label="待分配设定地震任务" name="toBeAssigned">
        <el-table :data="assignedDataList" v-loading="assignedLoading" style="width: 100%; margin-bottom: 20px" stripe
          row-key="id" border default-expand-all>
          <el-table-column prop="taskNum" label="任务编号" align="center" />
          <el-table-column prop="taskName" label="任务名称" align="center">
            <template #default="{row}">
              <el-link type="primary" :underline="false" @click="viewDetail(row)">{{row.taskName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="taskManager" label="任务管理员" align="center" />
          <el-table-column prop="taskStatus" label="任务状态" align="center">
            <template #default="{row}">
              <span>{{optionCode['taskStatus'][row.taskStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="groupName" label="承担小组" align="center" />
          <el-table-column prop="groupLeader" label="组长" align="center" />
          <el-table-column prop="taskDistrict" label="任务地区" align="center">
          	<template #default="scope">
              <el-tooltip
				        placement="top"						
				        v-model="scope.row.showTooltip"				
				        :show-after="500"
				        :content="scope.row.taskDistrict"
				        effect="dark"				
				        :disabled="!scope.row.showTooltip">							
							  <!--<div slot="content">{{scope.row.taskDistrict}}</div>-->						
							  <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.taskDistrict}}</div>						
							</el-tooltip>
           	</template>
           </el-table-column>
          <el-table-column prop="parentTask" label="所属父任务" align="center" />
        </el-table>
        <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
          v-model:limit="queryParams.rows" @pagination="getUndistributedTaskList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { useMajorProjectStore } from '@/store/modules/majorProject'
import { getAllTask, getUndistributedTask } from '@/api/earthquakeLossesEstimation/earthquakeSetting'

const router = useRouter()
const { proxy } = getCurrentInstance()
const optionCode = {
  'taskStatus': { '1': '进行中', '2': '审核中', '3': '已结束' }
}
const data = reactive({
  queryParams: {
    page: 1,
    rows: 10,
    taskNum: '',
    taskName: '',
    taskStatus: '',
    province: '',
    city: '',
    county: ''
  },
  total: 0,
  allDataList: [],
  assignedDataList: [],
  cityData: [], // 市
  areaData: [], //区、县
})
let { queryParams, allDataList, assignedDataList, total, cityData, areaData } = toRefs(data)
const allLoading = ref(true)
const assignedLoading = ref(true)
/* 省、市、区/县 */
const majorProject = useMajorProjectStore()
const { provinceData } = storeToRefs(majorProject)
const { getProvinceData, getCityData, getAreaData } = majorProject

onMounted(async () => {
  await getProvinceData();
  getList();
})
const chooseProvince = async (value) => {
  queryParams.value.city = null;
  queryParams.value.county = null;
  cityData.value = [];
  areaData.value = [];
  cityData.value = await getCityData(value)
}
const chooseCity = async (value) => {
  queryParams.value.county = null;
  areaData.value = [];
  areaData.value = await getAreaData(value)
}
// 查询列表
const getList = () => {
  if (activeTabName.value == "all") {
    getAllTaskList()
  } else if (activeTabName.value == "toBeAssigned") {
    getUndistributedTaskList()
  }
}
// 所有任务
const getAllTaskList = () => {
  allLoading.value = true
  getAllTask(queryParams.value).then(res => {
    let { data, code } = res
    allLoading.value = false
    if(code == 200) {
      allDataList.value = data.rows
      total.value = data.total
    }

  }).catch(err => {
    allLoading.value = false
  })
}
// 待分配任务
const getUndistributedTaskList = () => {
  assignedLoading.value = true
  getUndistributedTask(queryParams.value).then(res => {
    let { data, code } = res
    assignedLoading.value = false
    if (code == 200) {
      assignedDataList.value = data.rows
      total.value = data.total
    }
  }).catch(err => {
    assignedLoading.value = false
  })

}
const activeTabName = ref('all')
// 切换标签页
function handleClick(tab) {
  if (tab.props.name == "all") {
    getAllTaskList()
  } else if (tab.props.name == "toBeAssigned") {
    getUndistributedTaskList()
  }
}
// 查看
const handleQuery = () => {
  queryParams.value.page = 1;
  getList()
}
// 重置
const resetQuery = () => {
  proxy.resetForm("queryRef");
  getList()
}
// 任务名称
const viewDetail = (row) => {
  // assignSetArthquake 0代表已分配
  // 有子任务的父任务-1parentId为0，children.length为0
  // 无子任务的父任务-2parentId为0，children.length为0
  // 子任务-3 parentId不为0
  // 待分配任务-4
  // assignSetArthquake 0代表已分配
  let pattern = '0'
  if (row.parentId != '0') {
    pattern = '3'
  } else {
    pattern = row.children?.length > 0 ? '1' : '2'
  }
  router.push({ name: "earthquakeDetail", query: {taskId: row.id, taskType: row.assignSetArthquake || '1', pattern, metaTitle: row.taskName,taskDistrict:row.taskDistrict} })
}
function showTips(obj, row){
  /*obj为鼠标移入时的事件对象*/
  /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
  let TemporaryTag = document.createElement('span');
  TemporaryTag.innerText = row.taskDistrict;
  TemporaryTag.className = 'getTextWidth';
  document.querySelector('body').appendChild(TemporaryTag);
  let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
  document.querySelector('.getTextWidth').remove();
  /*cellWidth为表格容器的宽度*/
  const cellWidth = obj.target.offsetWidth
  /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
  currentWidth <= (3*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}
</script>
<style scoped lang="scss">
:deep(.el-table) th.el-table__cell {
  border-bottom: 1px solid #e5ebf7 !important;
  border-right: 1px solid #e5ebf7 !important;
}
.el-tooltip__popper{
    max-width:20%;
}

.el-tooltip__popper,.el-tooltip__popper.is-dark{
  background:rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
.myNote{

  display:-webkit-box;

  text-overflow:ellipsis;

  overflow:hidden;

  -webkit-line-clamp: 3;

  -webkit-box-orient:vertical;

}
</style>